import React, { useEffect, useRef }  from 'react';
import * as echarts from 'echarts';
export const Week = (props) => {
  const chartRef = useRef()
  const options = {
      // 标题
      title: {
          text: "周营业额"
      },
      // 提示框组件
      tooltip: {
          // trigger: 'axis'
      },
      // 图例组件
      legend:{
      //     data:['销量'],
      //     show:true
      },
      // x轴
      xAxis: {
          type: 'category',
          data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期七']
      },
      // y轴
      yAxis: {
          type: 'value',
      },
      series: [{
          data: [4760, 5008, 3820, 6123, 8456,9400 , 7321],
          // type: 'line' 折线图
          type:'bar', // 柱状图
          name:'每天营业额'
      }]
  }

  useEffect(() => {
      // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
      const chart = echarts.init(chartRef.current)

      // 设置图表实例的配置项和数据
      chart.setOption(options)

      // 组件卸载
      return () => {
          // myChart.dispose() 销毁实例。实例销毁后无法再被使用
          chart.dispose()
      }
  },[])

  return(
      // 宽度要大，不然y轴有些名称可能不会显示
      <div style={{width: "600px", height: "435px"}} ref={chartRef}></div>
  )
}